<template>
    <div class="Login ">
        <div class=" LoginBox">
            <div class="LoginLeft">
                <img src="../../assets/JPG/chat.jpg" alt="">
            </div>
            <div class="LoginRight">
                <h2 class="text_align">{{ title }}</h2>
                <div class="from">
                    <a-form :model="LoginList" :rules=rules class="fromBox" ref="from">
                        <a-form-item label="邮箱" name="userMailbox">
                            <a-input v-model:value="LoginList.userMailbox" placeholder="请输入邮箱" />
                        </a-form-item>
                        <a-form-item label="验证码" name="authCodeText" v-if="TypeFlag != 'Login'">
                            <a-input v-model:value="LoginList.authCodeText" placeholder="请输入验证码" style="width:74%" /><button
                                @click="Yzm" :disabled="YZMFlag">{{ yzm
                                }}</button>
                        </a-form-item>
                        <a-form-item label="昵称" name="userNickname" v-if="TypeFlag != 'Login' && TypeFlag != 'Forgot'">
                            <a-input v-model:value="LoginList.userNickname" placeholder="请输入昵称" />
                        </a-form-item>
                        <a-form-item label=" 密码" name="userPassword" v-if="TypeFlag != 'Register'">
                            <a-input-password v-model:value="LoginList.userPassword" placeholder="请输入密码" style="height:40px"
                                autocomplete="off" />
                        </a-form-item>
                        <a-form-item label=" 确认密码" name="userPasswordOk" v-if="TypeFlag == 'Forgot'">
                            <a-input-password v-model:value="LoginList.userPasswordOk" placeholder="请再次输入密码"
                                style="height:40px" autocomplete="off" />
                        </a-form-item>
                    </a-form>
                </div>
                <div class="LoginRightBottom text_align">
                    <button style="margin:0 0 20px 0;" @click="Submit" :disabled="SubMitFlag">提交</button>
                    <div>
                        <span v-if="TypeFlag === 'Login'">第一次到这里来,点击<button @click="TitleUpdate('Register')" data-text
                                style="padding:0">注册</button>,忘记密码点击<button @click="TitleUpdate('Forgot')" data-text
                                style="padding:0">找回密码</button></span>
                        <span v-else-if="TypeFlag === 'Register'">已有账号,点击<button @click="TitleUpdate('Login')" data-text
                                style="padding:0">登录</button>,忘记密码点击<button @click="TitleUpdate('Forgot')" data-text
                                style="padding:0">找回密码</button></span>
                        <span v-if="TypeFlag === 'Forgot'">第一次到这里来,点击<button @click="TitleUpdate('Register')" data-text
                                style="padding:0">注册</button>,已有账号,点击<button @click="TitleUpdate('Login')" data-text
                                style="padding:0">登录</button>,</span>
                    </div>

                </div>
            </div>
        </div>
        <div class="Loginfooter text_align">
            <span style="letter-spacing:2px">本程序邮箱注册只适用于<span
                    style="color:red;letter-spacing:0px">qq/163.com</span>邮箱，对其他邮箱只是做了一定的适配，并不一定支持其他邮箱。</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { message } from "ant-design-vue";
import Axios from "../../Axios/Axios";
import { ref } from "vue"
import { SetToken } from "../../utils/Token";
import { useRouter } from "vue-router";
import { main } from "../../store";
const Mains = main()
const title = ref("登录")
const from = ref()
const YZMFlag = ref(false)
const SubMitFlag = ref(false)
const router = useRouter()
const timer = ref()
const TypeFlag = ref("Login")
const yzm = ref("获取验证码")
const LoginList = ref({
    userMailbox: "",
    userPassword: "",
    authCodeType: "",
    authCodeMailbox: "",
    authCodeText: "",
    userNickname: "",
    userPasswordOk: "",
})
const rules = {
    userPasswordOk: [{
        required: true, message: "请再次输入密码", trigger: "blur"
    }],
    userNickname: [{
        required: true, message: "请输入昵称", trigger: "blur"
    }, {
        min: 2, max: 8, message: "昵称长度再2-8之间", trigger: "blur"
    }],
    userMailbox: [{
        required: true, message: "请输入邮箱", trigger: "blur"
    }, {
        pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: "请输入正确的邮箱格式", trigger: "blur"
    }],
    userPassword: [{
        required: true, message: "请输入密码", trigger: "blur"
    },
    {
        pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/, message: "必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间", trigger: "blur"
    }],
    authCodeText: [{
        required: true, message: "请输入验证码", trigger: "blur"
    }

    ]
}
// 点击提交
const Submit = () => {
    // SubMitFlag.value = true
    if (TypeFlag.value === "Login") {
        from.value.validate().then(async () => {
            const res = await Axios("UserLogin", LoginList.value)
            if (res.code == 200) {
                TypeFlag.value = "Login"
                SetToken(res.data)
                TitleUpdate("Login")
                Mains.WebScoketSerive()
                message.success(res.message)
                SubMitFlag.value = false

                router.push({
                    name: "/"
                })
            } else {
                SubMitFlag.value = false
                message.warning(res.message)
            }

        })

    } else if (TypeFlag.value === "Register") {

        LoginList.value.authCodeMailbox = LoginList.value.userMailbox
        from.value.validate().then(async () => {
            LoginList.value.authCodeType = "Register"
            const res = await Axios("Register", LoginList.value)
            if (res && res.code == 200) {
                TypeFlag.value = "Login"
                TitleUpdate("Login")
                message.success(res.message)
                SubMitFlag.value = false
            } else {
                SubMitFlag.value = false
                message.warning("请求失败")
            }
        })
    } else if (TypeFlag.value === "Forgot") {

        from.value.validate().then(async () => {
            if (LoginList.value.userPassword === LoginList.value.userPasswordOk) {
                LoginList.value.authCodeType = "Forgot"
                const res = await Axios("Forgot", LoginList.value)

                if (res.code == 200) {
                    TypeFlag.value = "Login"
                    TitleUpdate("Login")
                    message.success(res.message)
                    SubMitFlag.value = false
                } else {
                    SubMitFlag.value = false
                    message.warning(res.message)
                }
            } else {
                SubMitFlag.value = false
                message.warning("两次密码不一样")
            }

        })
    }
}

// 点击切换页面
const TitleUpdate = (type: string) => {
    if (timer.value) {
        clearInterval(timer.value)
        yzm.value = `获取验证码`
        YZMFlag.value = false
    }

    LoginList.value = {
        userMailbox: "",
        userPassword: "",
        authCodeType: "",
        authCodeMailbox: "",
        authCodeText: "",
        userNickname: "",
        userPasswordOk: "",
    }
    TypeFlag.value = type
    switch (type) {
        case "Login":
            title.value = "登录";
            break;
        case "Register":
            title.value = "注册";
            break;
        case "Forgot":
            title.value = "忘记密码";
            break;
    }
}
// 点击获取验证码
const Yzm = async (e: any) => {
    e.preventDefault()
    if (LoginList.value.userMailbox != "") {
        const pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        if (pattern.test(LoginList.value.userMailbox)) {
            YZMFlag.value = true
            LoginList.value.authCodeMailbox = LoginList.value.userMailbox


            LoginList.value.authCodeType = TypeFlag.value
            const res = await Axios("GetCode", LoginList.value)

            if (res && res.code == 200) {
                message.success(res.message)
                let num = 60
                timer.value = setInterval(() => {
                    num--
                    yzm.value = `${num}秒后重写获取`
                    if (num <= 0) {
                        YZMFlag.value = false
                        yzm.value = `获取验证码`
                        clearInterval(timer.value)
                    }

                }, 1000)
            } else {
                YZMFlag.value = false
                message.warning(res.message)
            }

        } else {
            YZMFlag.value = false
            message.error("请输入正确邮箱格式再获取验证码")
        }

    } else {
        YZMFlag.value = false
        message.error("请输入邮箱再获取验证码")
    }

}


</script>

<style lang="scss" scoped>
.LoginBox {
    display: flex;
}

.Login {
    align-items: center;
}

.LoginRight {
    height: 100%;
    flex: 1;
    margin-left: 40px;

    .LoginRightBottom {}

    .fromBox {

        margin: 0 auto;
        margin-bottom: 20px;

        input {
            height: 40px;
        }
    }
}

.LoginLeft {
    flex: 1;
    height: 100%;
    text-align: center;


    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

.Loginfooter {
    margin-top: 30px;
}
</style>
